<!-- 番茄钟 -->
<template>
  <IonPage>
    <IonContent :style="mainstyle">
      <div class="container">
        <!-- 上方历史记录区域 -->
        <div class="history">
          <img
            class="img_history"
            src="../assets/images/history.png"
            @click="ClickCompletions"
          />
          <p class="p_history">历史记录</p>
        </div>
        <!-- 番茄钟文字区域 -->
        <p class="text_clock">番茄钟</p>
        <!-- 输入框区域 -->
        <div class="pen_content">
          <img class="pen" src="../assets/images/pen.png" @click="ShowPen" />
          <input
            class="content"
            type="text"
            v-model="inputContent"
            placeholder="请输入你的专注内容"
          />
          <img
            class="shutdown"
            @click="clearInput"
            src="../assets/images/shutdown.png"
          />
        </div>
        <!-- 番茄钟圆环区域 -->
        <div class="circule">
          <div class="circule_out">
            <div class="circule_in">
              <span class="minute">{{ showTimeM }}</span>
              <span>:</span>
              <span class="second">{{ showTimeS }}</span>
            </div>
          </div>
        </div>
        <!-- 开始专注按钮区域 -->
        <div class="start">
          <span
            class="start_focus"
            @click="StartButtonClick"
            v-if="isPomodoroStartButtonShow"
            >开始</span
          >
          <span
            class="shutdown_focus"
            @click="StopButtonClick"
            v-if="isPomodoroStopButtonShow"
            >停止</span
          >
          <span
            class="continue_focus"
            @click="ContinueButtonClick"
            v-if="isPomodoroContinueButtonShow"
            >继续</span
          >
          <span
            class="continue_focus"
            @click="EndButtonClicked"
            v-if="isPomodoroRestEndButtonShow"
            >结束休息</span
          >
        </div>
        <span
          class="end_focus"
          @click="EndButtonClicked"
          v-if="isPomodoroEndButtonShow"
          >结束</span
        >
      </div>

      <!-- 底部导航栏 -->
      <div class="bottom_nav">
        <IonText router-link="/main"
          ><img src="../assets/images/calender2.png"
        /></IonText>
        <IonText router-link="/clock"
          ><img src="../assets/images/clock.png"
        /></IonText>
        <IonText router-link="/main"
          ><img src="../assets/images/add.png"
        /></IonText>
        <IonText router-link="/table"
          ><img src="../assets/images/view.png"
        /></IonText>
        <IonText router-link="/user">
          <img src="../assets/images/people.png" />
        </IonText>
      </div>
    </IonContent>
    <div
      class="all_alert"
      v-if="AlertShow"
      :style="alertstyle"
      @click="PageCancle"
    >
      <div class="scroll" v-if="ShowCompletions">
        <span class="history_finsh">完成专注:{{ completions }}次</span>
        <span class="horizon"></span>
        <span class="history_content" v-for="item in tasks" :key="item.id">
          <ul>
            <li>{{ item.content }}</li>
          </ul>
        </span>
      </div>
    </div>
  </IonPage>
</template>
<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .history {
    height: 10vh;
    width: 20vw;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    justify-content: center;
    /* 侧轴对齐方式 */
    align-items: center;
    .img_history {
      height: 10vw;
      width: 10vw;
    }
  }
}

.text_clock {
  text-align: center;
  color: #808080;
  font-size: 8vw;
  font-weight: bold;
}

.pen_content {
  width: 60vw;
  height: 7vh;
  border: 0.1vw solid black;
  background-color: white;
  border-radius: 25vw;
  display: flex;
  margin-top: 6vw;
  justify-content: space-between;
  .pen {
    height: 3vh;
    width: 6vw;
    margin-top: 4vw;
    margin-left: 3vw;
  }
  .content {
    width: 30vw;
    border: none;
    /*  去除轮廓*/
    outline: none;
  }
  .shutdown {
    width: 8vw;
    height: 4vh;
    margin-top: 1.5vh;
    margin-right: 4vw;
  }
}

.circule {
  margin-top: 4vh;
  .circule_out {
    width: 65vw;
    height: 65vw;
    border: 0.1vw solid black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .circule_in {
      width: 60vw;
      height: 60vw;
      border: 0.1vw solid black;
      border-radius: 50%;
      font-size: 15vw;
      color: gray;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 20vw;
      }
    }
  }
}

// start区域
.start {
  width: 80vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.start_focus {
  width: 35vw;
  height: 6vh;
  border: 0.1vw solid black;
  background-color: black;
  border-radius: 25vw;
  margin-top: 7vw;
  color: white;
  font-size: 6vw;
  text-align: center;
  padding-top: 2vw;
}

.shutdown_focus {
  width: 35vw;
  height: 6vh;
  border: 0.1vw solid black;
  background-color: black;
  border-radius: 25vw;
  margin-top: 7vw;
  color: white;
  font-size: 6vw;
  text-align: center;
  padding-top: 2vw;
}

.continue_focus {
  width: 35vw;
  height: 6vh;
  border: 0.1vw solid black;
  background-color: black;
  border-radius: 25vw;
  margin-top: 7vw;
  color: white;
  font-size: 6vw;
  padding-top: 2vw;
  text-align: center;
}

.end_focus {
  width: 35vw;
  height: 6vh;
  border: 0.1vw solid black;
  background-color: black;
  border-radius: 25vw;
  margin-top: 4vw;
  color: white;
  font-size: 6vw;
  padding-top: 2vw;
  text-align: center;
}

.bottom_nav {
  width: 100%;
  bottom: 0;
  background-color: white;
  /* height: 10vh; */
  display: flex;
  justify-content: space-between;
  /* flex: 1; */
  position: fixed;
  img {
    width: 10vw;
    height: 10vw;
    /* margin: 2vh 5vw; */
  }
}

.scroll {
  overflow: auto;
  width: 95vw;
  height: 50vh;
  margin-left: 2vw;
  border: 0.1vw solid black;
  border-radius: 10vw;
  display: flex;
  flex-direction: column;
}

.history_content {
  margin-top: 3vh;
  margin-left: 15vw;
}

.horizon {
  width: 80vw;
  border: 0.1vw dashed gray;
  margin-left: 5vw;
}

.history_finsh {
  font-size: 6vw;
  margin-left: 5vw;
  margin-top: 3vw;
  font-weight: bold;
}

.all_alert {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: end;
}
</style>
<script setup lang="ts">
import { IonPage, IonContent, IonText } from "@ionic/vue";
import { computed, onMounted, Ref, ref } from "vue";

let inputContent: Ref<string> = ref("");
// 开始按钮
let isPomodoroStartButtonShow: Ref<boolean> = ref(true);
//停止按钮
let isPomodoroStopButtonShow: Ref<boolean> = ref(false);
// 继续按钮
let isPomodoroContinueButtonShow = ref(false);
// 番茄钟停止按钮
let isPomodoroEndButtonShow = ref(false);
// 休息结束按钮
let isPomodoroRestEndButtonShow = ref(false);

//保存的秒
let savedCounts = ref(0);
//保存的分
let savedCountm = ref(0);
// 默认数值，重置时以便初始化
let initCountm = ref(0);
// 默认数值，重置时以便初始化
let initCounts = ref(5);
// 初始休息时间
let initRestM = ref(0);
let initRestS = ref(3);
let counts = ref(0);
let countm = ref(0);
//四个循环后的休息的分和秒
let longRestm = ref(0);
let longRests = ref(10);
// 实际显示的时间
let showCounts = ref("");
let showCountm = ref("");
// 存放定时器的变量
let cts: undefined | NodeJS.Timeout | number = undefined;
let isRest: boolean = false;
let islongRest: boolean = false;
let initPomodoroCycle = 4;
let pomodoroCycle = initPomodoroCycle;
//历史记录保存记录
let content: string = "";
//统计保存记录
let completions: number = 0;
//点击历史记录
let ShowCompletions: Ref<boolean> = ref(true);
let AlertShow: Ref<boolean> = ref(false);
let mainstyle = {
  opacity: 1,
};
let alertstyle = {
  backgroundColor: "transparent",
};
let tasks = [
  {
    id: 1,
    content: "",
  },
];
// 清除定时器
const clearCts = () => {
  if (cts !== undefined) {
    clearInterval(cts);
    cts = undefined;
  }
};
// 番茄钟开始事件
const pomodoroStart = () => {
  if (cts === undefined) {
    cts = setInterval(() => {
      counts.value--;
      if (countm.value === 0 && counts.value === -1) {
        pomodoroEnd();
      }
    }, 1000);
  }
};

// 番茄钟结束事件
const pomodoroEnd = () => {
  pomodoroRestStart();
};
// 番茄钟休息开始
const pomodoroRestStart = () => {
  isRest = true;
  isPomodoroStartButtonShow.value = false;
  isPomodoroStopButtonShow.value = false;
  isPomodoroEndButtonShow.value = false;
  isPomodoroContinueButtonShow.value = false;
  isPomodoroRestEndButtonShow.value = true;
  clearCts();
  countm.value = initRestM.value;
  counts.value = initRestS.value;
  if (cts === undefined) {
    cts = setInterval(() => {
      counts.value--;
      if (countm.value === 0 && counts.value === -1) {
        pomodoroRestEnd();
      }
    }, 1000);
  }
};

// 番茄钟休息结束
const pomodoroRestEnd = () => {
  pomodoroCycle--;
  if (pomodoroCycle <= 0) {
    isPomodoroStartButtonShow.value = true;
    isPomodoroStopButtonShow.value = false;
    isPomodoroEndButtonShow.value = false;
    isPomodoroContinueButtonShow.value = false;
    isPomodoroRestEndButtonShow.value = false;
    clearCts();
    // 结束后改为默认数值
    countm.value = initCountm.value;
    counts.value = initCounts.value;
    alert("你已经完成了所有任务啦");
    pomodoroCycle = initPomodoroCycle;
    pomodorolongRest();
  } else {
    console.log("剩余循环次数" + pomodoroCycle);
    clearCts();
    StartButtonClick();
  }
};
//长时间休息
const pomodorolongRest = () => {
  islongRest = true;
  isPomodoroStartButtonShow.value = false;
  isPomodoroStopButtonShow.value = false;
  isPomodoroEndButtonShow.value = false;
  isPomodoroContinueButtonShow.value = false;
  isPomodoroRestEndButtonShow.value = true;
  clearCts();
  counts.value = longRests.value;
  countm.value = longRestm.value;
  if (cts === undefined) {
    cts = setInterval(() => {
      counts.value--;

      if (countm.value === 0 && counts.value === -1) {
        pomodoroLongRestEnd();
      }
    }, 1000);
  }
};

const pomodoroLongRestEnd = () => {
  isPomodoroStartButtonShow.value = true;
  isPomodoroStopButtonShow.value = false;
  isPomodoroEndButtonShow.value = false;
  isPomodoroContinueButtonShow.value = false;
  isPomodoroRestEndButtonShow.value = false;
  clearCts();
  // 结束后改为默认数值
  countm.value = initCountm.value;
  counts.value = initCounts.value;
};

const StartButtonClick = () => {
  isPomodoroStartButtonShow.value = false;
  isPomodoroStopButtonShow.value = true;
  isPomodoroEndButtonShow.value = true;
  isPomodoroContinueButtonShow.value = false;
  isPomodoroRestEndButtonShow.value = false;
  countm.value = initCountm.value;
  counts.value = initCounts.value;
  pomodoroStart();
};

// 暂停按钮点击后
const StopButtonClick = () => {
  // 保存当前的计数值
  savedCounts.value = counts.value;
  savedCountm.value = countm.value;
  // 更新状态
  isPomodoroStartButtonShow.value = false;
  isPomodoroContinueButtonShow.value = true;
  isPomodoroStopButtonShow.value = false;
  clearCts();
};
//继续
const ContinueButtonClick = () => {
  // 不显示番茄钟按钮开始
  isPomodoroStartButtonShow.value = false;
  // 不显示番茄钟按钮停止
  isPomodoroStopButtonShow.value = true;
  // 不显示番茄钟按钮继续
  isPomodoroContinueButtonShow.value = false;
  // 关闭休息按钮的显示
  isPomodoroRestEndButtonShow.value = false;
  // 确保从保存的状态中恢复的计数器是数字
  // 读取历史分钟秒数数字
  counts.value = savedCounts.value;
  countm.value = savedCountm.value;
  pomodoroStart();
};
const EndButtonClicked = () => {
  isPomodoroStartButtonShow.value = true;
  isPomodoroStopButtonShow.value = false;
  isPomodoroEndButtonShow.value = false;
  isPomodoroContinueButtonShow.value = false;
  isPomodoroRestEndButtonShow.value = false;
  clearInterval(cts);
  // 必须将cts重置为unfined,否者无法创建对象
  cts = undefined;
  // 结束后改为默认数值
  countm.value = initCountm.value;
  counts.value = initCounts.value;
  console.log("定时器已被清除");
};
const clearInput = () => {
  inputContent.value = "";
};
//番茄钟开始按钮事件

const ClickCompletions = () => {
  ShowCompletions.value = true;
  mainstyle.opacity = 0.2;
  AlertShow.value = true;
};
//点击文本框中的笔，
const ShowPen = () => {
  if (inputContent.value == "") {
    alert("专注不能为空");
  } else {
    tasks.push({
      id: 1,
      content: inputContent.value,
    });
    inputContent.value = "";
  }
};

const PageCancle = () => {
  ShowCompletions.value = false;
  (AlertShow.value = false), (mainstyle.opacity = 1);
};
const showTimeM = computed(() => {
  if (countm.value < 10) {
    showCountm.value = "0" + countm.value.toString();
    return showCountm.value;
  } else {
    showCountm.value = countm.value.toString();
    return showCountm.value;
  }
});

const showTimeS = computed(() => {
  if (counts.value === -1) {
    if (countm.value > 0) {
      countm.value--;
    }
    counts.value = 59;
  }
  if (counts.value < 10) {
    showCounts.value = "0" + counts.value.toString();
    return showCounts.value;
  } else {
    showCounts.value = counts.value.toString();
    console.log(showCounts);
    return showCounts.value;
  }
});

// 网页创建后就将分钟显示到番茄钟
onMounted(() => {
  countm.value = initCountm.value;
  counts.value = initCounts.value;
});
</script>
